<template>
  <div class="request">

      <div class="search-box">
        <Form inline :label-width="80">
          <FormItem label="ID">
            <Input type="text" v-model="id" placeholder="ID">
            </Input>
          </FormItem>
          <FormItem label="检索条件">
            <Select v-model="paramName" style="width:100px" clearable>
              <Option value="itemCode">项目编码</Option>
              <Option value="itemName">项目名称</Option>
            </Select>
            <Input type="text" v-model="value" placeholder="" style="width:200px">
            </Input>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="doSearch">搜索</Button>
            <Button type="warning" @click="historySearch">历史版本</Button>
          </FormItem>
        </Form>
      </div>

    <div class="opt">
      <Button type="primary" @click="doSearch">刷新</Button>
      <Button type="success" @click="add">新增</Button>
    </div>
    <div class="data-table">
      <Table border :columns="columns" :data="tableData" size="small" :loading="tableLoading"></Table>
    </div>

    <Drawer
      :title="title"
      v-model="showEdit"
      width="720"
      :mask-closable="false"
      :styles="styles"
    >
      <Form :model="editData" :label-width="80">


        <FormItem label="检查项目" prop="checkCode">
          <CommonSelect v-model="editData.checkCode" :code.sync="editData.checkDisplay"
                        :name.sync="editData.checkDisplay" :data-options="checkTypeDict">
          </CommonSelect>
        </FormItem>

        <FormItem label="姓名" prop="patientName">
          <Input v-model="editData.patientName"/>
        </FormItem>

        <FormItem label="预定检查时间" prop="occurrenceDateTime">
          <DatePicker type="datetime"  v-model="editData.occurrenceDateTime"/>
        </FormItem>
        <FormItem label="申请时间" prop="requestDateTime">
          <DatePicker type="datetime"   v-model="editData.requestDateTime"/>
        </FormItem>
        <FormItem label="申请医生" prop="requestDoctorName">
          <Input v-model="editData.requestDoctorName"/>
        </FormItem>

        <FormItem label="申请原因" prop="reasonText">
          <Input v-model="editData.reasonText"/>
        </FormItem>
        <FormItem label="检查部位" prop="checkPartCode">
          <CommonSelect v-model="editData.checkPartCode" :code.sync="editData.checkPartCode"
                        :name.sync="editData.checkPartDisplay" :data-options="checkPartDict">
          </CommonSelect>
        </FormItem>
      </Form>

      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" type="primary" @click="onSubmit">确定</Button>
        <Button type="error" @click="showEdit = false">取消</Button>
      </div>
    </Drawer>
  </div>

</template>

<script>
  import CommonSelect from "../../../components/select/commonSelect";
  export default {
    name: "request",
    components: { CommonSelect},
    computed: {
      tableData() {
        let jData = [];
        this.$store.state.procedureRequest.procedureRequestList.forEach(entry => {
          let re = entry.resource;

          if (re.total && re.total.myStringValue == '0')
            return;
          jData.push({

            url: re.id.myStringValue,
            id: re.id.myUnqualifiedId,
            versionId: re.id.myUnqualifiedVersionId,

            checkCode:(re.code && re.code.coding && re.code.coding[0].code) ? re.code.coding[0].code.myStringValue:"",
            checkDisplay:(re.code && re.code.coding && re.code.coding[0].display) ? re.code.coding[0].display.myStringValue:"",
            patientName: (re.subject && re.subject.display) ? re.subject.display.myStringValue : "",
            occurrenceDateTime:(re.occurrence) ? re.occurrence.myStringValue :"",
            requestDateTime : (re.authoredOn) ? re.authoredOn.myStringValue : "",
            requestDoctorName: ( re.requester &&  re.requester.agent &&  re.requester.agent.display) ? re.requester.agent.display.myStringValue : "",
             reasonText:(re.reasonCode && re.reasonCode[0].text) ? re.reasonCode[0].text.myStringValue : "",
            checkPartCode:(re.bodySite && re.bodySite[0].coding && re.bodySite[0].coding[0].code) ?  re.bodySite[0].coding[0].code.myStringValue: "",
            checkPartDisplay:(re.bodySite && re.bodySite[0].coding && re.bodySite[0].coding[0].display) ?  re.bodySite[0].coding[0].display.myStringValue: ""


          })
        })
        return jData;
      }
    },
    data() {
      return {
        type: 'ProcedureRequest',
        id: null,
        paramName: null,
        value: null,
        tableLoading: false,
        showEdit: false,
        isUpdate: false,
        checkTypeDict: [{code: '80859-2', name: '心脏彩色多普勒超声'}],
        checkPartDict:[{code: '80891009', name: '心脏'}],
        title: '',
        editData: {},
        styles: {
          height: 'calc(100% - 55px)',
          overflow: 'auto',
          paddingBottom: '53px',
          position: 'static'
        },
        columns: [
          {
            title: 'ID',
            key: 'id'
          },
          {
            title: '版本',
            key: 'versionId'
          },
          {
            title: '检查项目',
            key: 'checkDisplay'
          },
          {
            title: '患者姓名',
            key: 'patientName'
          },
          {
            title: '预定检查时间',
            key: 'occurrenceDateTime'
          },
          {
            title: '申请时间',
            key: 'requestDateTime'
          },{
            title: '申请医生',
            key: 'requestDoctorName'
          },{
            title: '申请原因',
            key: 'reasonText'
          },  {
            title: '检查部位',
            key: 'checkPartDisplay'
          },
          {
            title: "操作",
            width: 120,
            type: "render",
            render: (h, params) => {
              return h('div', {
                class: 'btn-wrap'
              }, [
                h('a', {
                  on: {
                    click: () => {
                      this.update(params.row)
                    }
                  }
                }, '编辑'),
                h('Divider', {
                  props: {type: 'vertical'},
                }),
                h('a', {
                  on: {
                    click: () => {
                      this.remove(params.row)
                    }
                  }
                }, '删除'),
              ])
            }
          }
        ]
      }
    },
    created() {
      this.doSearch();
    },
    methods:{
      add() {
        this.editData = {
          status:"active",
          intent:"original-order",
          checkCode:"80859-2",
          checkDisplay:"心脏彩色多普勒超声",
          patientName: "刘康",
          occurrenceDateTime:"2018-11-06 16:24:48",
           requestDateTime:"2018-11-05 16:24:48",
           requestDoctorName:"李小青",
           reasonText:"患者心悸",
          checkPartCode:"80891009",
          checkPartDisplay:"心脏",
        };
        this.showEdit = true;
        this.isUpdate = false;
        this.title = '新增检查申请单';
      },
      doSearch() {
        this.tableLoading = true;

        this.$store.dispatch('getProcedureRequestList', {
          type: 'ProcedureRequest',
          id: this.id,
          paramName: this.paramName,
          value: this.value,
        }).then(() => {
          this.tableLoading = false;
        }).catch(res => {
          this.$Notice.error({
            title: res.error,
            desc: res.message
          });
          this.tableLoading = false;
        })
      },
      historySearch() {
        if (!this.id) {
          this.$Message.error('请输入ID');
          return;
        }
        this.tableLoading = true;
        this.$store.dispatch('getHistoryProcedureRequestList', {
          type: 'ProcedureRequest',
          id: this.id,
        }).then(() => {
          this.tableLoading = false;
        })
      },
      update(row) {
        this.editData = JSON.parse(JSON.stringify(row));
        this.showEdit = true;
        this.isUpdate = true;
        this.title = '更新检查申请单';
      },
      remove(row) {
        this.$store.dispatch('deleteProcedureRequest', {
          type: 'ProcedureRequest',
          id: row.id
        }).then(() => {
          this.$Message.success('删除成功');
          this.id = row.id;
          this.doSearch();
        });
      },
      onSubmit() {
        if (this.isUpdate) {
          this.$store.dispatch('updateProcedureRequest', Object.assign({type: 'ProcedureRequest'}, this.editData)).then(() => {
            this.$Message.success('更新成功');
            this.showEdit = false;
            this.id = this.editData.id;
            this.doSearch();
          });
        } else {
          this.$store.dispatch('createProcedureRequest', Object.assign({type: 'ProcedureRequest'}, this.editData)).then((res) => {
            this.$Message.success('新增成功');
            this.showEdit = false;
            this.id = res.data.myId.myUnqualifiedId;
            this.doSearch();
          });
        }
      }

    }
  }
</script>

<style scoped>
  .data-table {
    margin-top: 10px;
  }

  .demo-drawer-footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
</style>
